<template>
  <div style="height: 100%;">
    <a-row style="margin-bottom: 5px;">
      <a-col>
        {{ $t('m.codegen.label.form_line_control_num')}}：
        <a-radio-group v-model="controlCount">
          <a-radio :value="1">
            1
          </a-radio>
          <a-radio :value="2">
            2
          </a-radio>
          <a-radio :value="3">
            3
          </a-radio>
          <a-radio :value="4">
            4
          </a-radio>
        </a-radio-group>
      </a-col>
    </a-row>
  <vxe-table
      ref="subTable"
      class="sortable-row-vxe"
      border
      :scroll-y="{enabled: false}"
      show-header-overflow
      show-overflow
      :height="height"
      :row-config="{isHover: true, useKey: true, keyField: 'id'}"
      :edit-config="{trigger: 'click', mode: 'cell', activeMethod: activeRowMethod}"
      :data="dataSource">
      <vxe-column width="60" align="center">
        <template #default>
          <span class="drag-btn">
            <i class="vxe-icon-num-list"></i>
          </span>
        </template>
      </vxe-column>
      <vxe-column type="seq" :title="$t('m.common.label.number')" width="60"></vxe-column>
      <vxe-column field="colCode" :title="$t('m.eform.apptable.entity.colCode')" :min-width="120"></vxe-column>
      <vxe-column field="colName" :title="$t('m.eform.appview.entity.colName')" :edit-render="{name: 'input'}" :min-width="140"></vxe-column>
      <vxe-column field="colType" :title="$t('m.eform.apptable.entity.colType')" :min-width="100" align="center"></vxe-column>
      <vxe-column field="isEdit" :title="$t('m.common.button.update')" :edit-render="{}" :min-width="70" align="center">
        <template #default="{ row }">
          <vxe-checkbox v-model="row.isEdit" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
        </template>
        <template #edit="{ row }">
          <vxe-checkbox v-model="row.isEdit" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
        </template>
      </vxe-column>
      <vxe-column field="isRequired" :title="$t('m.eform.appview.entity.isRequired')" :edit-render="{}" :min-width="70" align="center">
        <template #default="{ row }">
          <vxe-checkbox v-model="row.isRequired" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
        </template>
        <template #edit="{ row }">
          <vxe-checkbox v-model="row.isRequired" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
        </template>
      </vxe-column>
      <vxe-column field="showType" :title="$t('m.eform.apptable.entity.showType')"
                              :edit-render="{name: 'select', options: showType}" :min-width="100" align="center"></vxe-column>
      <vxe-column field="showConfig" :title="$t('m.eform.apptable.entity.showConfig')" :edit-render="{}" :min-width="100" align="center">
          <template #default="{ row }">
            <a-badge
              :dot="!!row.showConfig && noShowConfig.indexOf(row.showType) === -1">
              <a-button
                :disabled="noShowConfig.indexOf(row.showType) !== -1"
                type="link" size="small" @click="showConfigButton(row)">{{ $t('m.common.button.config') }}
              </a-button>
            </a-badge>
          </template>
          <template #edit="{ row }">
            <a-badge
              :dot="!!row.showConfig && noShowConfig.indexOf(row.showType) === -1">
              <a-button
                :disabled="noShowConfig.indexOf(row.showType) !== -1"
                type="link" size="small" @click="showConfigButton(row)">{{ $t('m.common.button.config') }}
              </a-button>
            </a-badge>
          </template>
        </vxe-column>
        <vxe-column field="formColNewRow" :title="$t('m.codegen.entity.formColNewRow')" :edit-render="{}" :min-width="100" align="center">
          <template #default="{ row }">
            <vxe-checkbox v-model="row.formColNewRow" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
          </template>
          <template #edit="{ row }">
            <vxe-checkbox v-model="row.formColNewRow" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
          </template>
        </vxe-column>
        <vxe-column field="listIsShow" :title="$t('m.codegen.entity.listIsShow')" :edit-render="{}" :min-width="70" align="center">
          <template #default="{ row }">
            <vxe-checkbox v-model="row.listIsShow" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
          </template>
          <template #edit="{ row }">
            <vxe-checkbox v-model="row.listIsShow" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
          </template>
        </vxe-column>
        <vxe-column field="listAlignment" :title="$t('m.eform.appview.entity.alignType')"
                                      :edit-render="{name: 'select', options: alignmentOptions}" :min-width="100" align="center"></vxe-column>
        <vxe-column field="listIsQuery" :title="$t('m.common.button.query')" :edit-render="{}" :min-width="80" align="center">
          <template #default="{ row }">
            <vxe-checkbox v-model="row.listIsQuery" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
          </template>
          <template #edit="{ row }">
            <vxe-checkbox v-model="row.listIsQuery" checked-value="Y" unchecked-value="N" :disabled="row.isDefault === 'Y'"></vxe-checkbox>
          </template>
        </vxe-column>
        <vxe-column field="listQueryType" :title="$t('m.eform.appview.entity.queryOp')"
                                              :edit-render="{name: 'select', options: queryOp}" :min-width="100" align="center"></vxe-column>
    </vxe-table>
  <form-show-config-dialog ref="formShowConfigDialog" @selectFinished="showConfigOk" :is-table="true"
                           @saveToDataConfig="saveToDataConfig"
                           :tableColList="dataSource" :groupId="groupId" ></form-show-config-dialog>

  <data-config-dialog ref="dataConfigDialog" @selectFinished="dataConfigOk" :is-table="true"
                      :groupId="groupId"></data-config-dialog>
  </div>
</template>
<script>

  import { httpAction, getAction } from '@/api/manage'
  import FormShowConfigDialog from '../../../eform/modules/actAppTable/FormShowConfigDialog'
  import DataConfigDialog from '../../../eform/modules/actAppView/DataConfigDialog'
  import YchConstant from "@/api/YchConstant";
  import {YchVxeTableMixin} from '@/mixins/YchVxeTableMixin'
  import { EFormConstant } from '@/views/eform/EFormConstant'

  export default{
    name:'TableFields',
    mixins: [YchVxeTableMixin],
    components: {
      FormShowConfigDialog,
      DataConfigDialog
    },
    props: {
      tableName:{
        type:String
      },
      refKey:{
        type:String
      },
      genConfigId:{
        type:String,
        default:""
      }
    },
    data(){
      return {
        loading: false,
        height: document.body.clientHeight - 280,
        showType: EFormConstant.showType.filter(item=>item.value!='page' && item.value!='editor'),
        queryOp: EFormConstant.queryOp.filter(item=>item.value!='custom'),
        noShowConfig: ['hidden', 'switch', 'serialno', 'editor', 'icon'],
        alignmentOptions:[
          {
             label: this.$t('m.eform.eformConstant.alignType.center'),
             value: 'center'
           },
           {
             label: this.$t('m.eform.eformConstant.alignType.left'),
             value: 'left'
           },
           {
             label: this.$t('m.eform.eformConstant.alignType.right'),
             value: 'right'
           },
        ],
        record: null,
        controlCount:2,
        groupId:"",
        dataSource:[],
        disabledRows: {
          isDefault: 'Y'
        },
        url: {
          list: YchConstant.PREFIX_EFORM + '/generator/manage/genTableColumn/queryTableColsByGenConfigIdAndTableName'
        },
      }
    },
    methods:{
      activeRowMethod({row, column}) {
        if (row.isDefault === "Y") {
          this.$refs.subTable.clearActived()
          return false
        }
        return true
      },
      showConfigButton (record) {
        this.record = record
        this.$refs.formShowConfigDialog.open(record.showConfig, record)
      },
      showConfigOk (json) {
        this.record['showConfig'] = json
      },
      saveToDataConfig (model, record) {
        this.$refs.dataConfigDialog.pasteDataConfig(model, record)
      },
      dataConfigButton (record) {
        this.record = record
        this.$refs.dataConfigDialog.open(record.dataConfig, record)
      },
      dataConfigOk (json) {
        this.record['dataConfig'] = json
      },
      loadData(){
        let that = this
        this.loading = true
        let params = {
          tableName:this.tableName,
          genConfigId:this.genConfigId
        }
        getAction(this.url.list, params).then(res => {
          if (res.success) {
            this.dataSource = res.result.columns
            if(res.result.controlCount){
              this.controlCount = res.result.controlCount
            }
          }
        }).finally(() => {
          this.loading = false
        })
      },
      getData () {
        return this.dataSource
      },
    },
    watch: {
      tableName: {
        handler() {
          this.loadData()
        },
        immediate: true
      }
    },
    created () {
      this.loadData()
      // 启用排序功能
      this.rowDrop('subTable', (newIndex, oldIndex) => {
        this.afterRowDrop(newIndex, oldIndex, this.dataSource);
      })
    },
  }
</script>
